<template name="collect-item">
    <view class="collect-item">
        <image
            :src="exchangeOrder.nft.img"
            class="collect-img"
            mode="aspectFill"
        ></image>
        <view class="off-the-shelf" v-if="exchangeOrder.state == 'wait'" @click="offShelf" >下架</view>
        <view class="collect-item-info">
            <u-text
                :text="exchangeOrder.nft.name"
                :lines="2"
                size="28rpx"
                :color="exchangeOrder.state == 'wait' || exchangeOrder.userId != userId?'#000000':'#888888'"
                margin="0 0 0 0"
                class="collect-item-name"
            ></u-text>
            <view class="nft-code-num">{{ exchangeOrder.code }}#{{ exchangeOrder.nft.total }}</view>
            <view class="collect-item-price">
                <u-text
                    :text="exchangeOrder.money"
                    color="#356CE7"
                    size="36rpx"
                    bold
                    prefixIcon="rmb"
                    iconStyle="font-size: 26rpx; color: #356CE7; font-weight: bold;top: 10rpx;"
                    v-if="exchangeOrder.state == 'wait' || exchangeOrder.userId != userId"
                ></u-text>
                <u-text
                    :text="exchangeOrder.money"
                    color="#B6B6B6"
                    size="36rpx"
                    bold
                    prefixIcon="rmb"
                    iconStyle="font-size: 26rpx; color: #B6B6B6; font-weight: bold;top: 10rpx;"
                    v-else
                ></u-text>
                <view class="collect-item-state" v-if="exchangeOrder.state == 'wait'">挂售中</view>
                <view class="collect-item-complete" v-if="exchangeOrder.state == 'complete' && exchangeOrder.userId == userId">已卖出</view>
                <view class="collect-item-complete" style="color: #4A4A4A" v-if="exchangeOrder.state == 'complete' && exchangeOrder.userId != userId">买到的</view>
                <view class="collect-item-complete" v-if="exchangeOrder.state == 'cancel'">已取消</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "collect-item",
        props: {
            exchangeOrder: {
                type: Object,
                default: () => {}
            }
        },
        data() {
          return {
              userId: this.$store.getters.userId
          }
        },
        methods: {
            offShelf() {
                this.$emit("offShelf")
            }
        }
    }
</script>

<style lang="scss" scoped>
    .collect-item {
        background: #ffffff;
        border-radius: 14rpx;
        overflow: hidden;
        position: relative;
        .off-the-shelf {
            width: 88rpx;
            height: 44rpx;
            background: rgba(3, 3, 3, 0.36);
            border-radius: 22rpx;
            border: 1px solid #FFFFFF;
            font-size: 24rpx;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 44rpx;
            text-align: center;
            position: absolute;
            top: 20rpx;
            right: 20rpx;
        }
        .collect-img {
            width: 100%;
            height: 344rpx;
            display: block;
        }
        .collect-item-info {
            padding: 20rpx 10rpx 30rpx 10rpx;
            .collect-item-price {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 16rpx;
                .collect-item-state {
                    font-size: 24rpx;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #356CE7;
                }
                .collect-item-complete {
                    font-size: 24rpx;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #B6B6B6;
                }
            }
            .collect-item-name {
                height: 80rpx;
                align-items: flex-start;
            }

        }
        .nft-code-num {
            box-sizing: border-box;
            background: url("https://img.ionepin.com/29375029dd5190db4fba0afb8fc577c3ccd405bb.png") no-repeat;
            background-size: 100% 100%;
            width: 176rpx;
            height: 52rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: 52rpx;
            padding-left: 10rpx;
        }
    }
</style>
